<template>
  <div>
    <Header title="我的关注" />
    <div class="concerned" v-for="item in list" :key="item.id">
      <div class="img">
        <img v-if="item.head_img" :src="$axios.defaults.baseURL + item.head_img" alt />
        <img v-else src="../../images/daone.png" alt />
      </div>

      <div class="news">
        <p>
          <van-icon v-if="item.gender==1" name="manager-o" class="icon" />
          <van-icon v-if="item.gender==0" name="user-o" class="icon1" />
          {{item.nickname}}
        </p>
        <div class="data">2020-9-22</div>
      </div>
      <div class="cancel" @click="cnacel(item.id)">取消关注</div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/CommonHeader";
export default {
  data() {
    return {
      list: [],
    };
  },
  components: {
    Header,
  },
  created() {
    this.loadPage();
  },
  methods: {
    // 把重新渲染页面的请求封装成函数 方便下次调用
    loadPage() {
      this.$axios({
        url: "/user_follows",
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    cnacel(id) {
      // 点击按钮后触发函数
      // 这里应该取消关注
      this.$axios({
        url: "/user_unfollow/" + id,
      }).then((res) => {
        console.log(res);
        //   取消后重新渲染页面
        this.$toast.success(res.data.message);
        this.loadPage();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.concerned {
  display: flex;
  padding: 22/360 * 100vw;
  margin-top: 20/360 * 100vw;
  align-items: center;
  border-bottom: 1px solid #ccc;
  .img {
    img {
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 15/360 * 100vw;
    }
  }
  .news {
    flex: 1;
    p {
      font-size: 16/360 * 100vw;
      .icon {
        color: #90c6ee;
        padding-bottom: 8/360 * 100vw;
      }
      .icon1 {
        color: #f92672;
      }
    }
    .data {
      margin-top: 5/360 * 100vw;
      color: #707070;
    }
  }
  .cancel {
    color: white;
    text-align: center;
    font-size: 13/360 * 100vw;
    width: 65/360 * 100vw;
    height: 25/360 * 100vw;
    line-height: 27/360 * 100vw;
    border: 1px solid #ccc;
    border-radius: 20/360 * 100vw;
    background-color: #cc0203;
  }
}
</style>